<template>
    <d2-container type="ghost">
        <!-- <template slot="header">博客列表</template> -->
        <el-card>
            <el-form :inline="true" :model="form" ref="form" size="mini" style="margin-bottom: -18px;">
                <el-form-item label="分类:">
                    <el-select v-model="form.type" placeholder="分类选择" style="width: 100px;">
                        <el-option :label="item.className" :value="item.className" v-for="item in classList"
                            :key="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="标题">
                    <el-input v-model="form.title" placeholder="标题" style="width: 120px;" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="findBlogByUsernameHasPage">
                        <d2-icon name="search" />
                        查询
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <el-button @click="refresh()">
                        <d2-icon name="refresh" />
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="d2-mt d2-mr d2-card">
            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"
                :stripe='true'>
                <!-- <el-table-column type="selection" width="55">
                </el-table-column> -->

                <el-table-column fixed label="标题" width="300" align='center' style="color:red;">
                    <template slot-scope="scope">
                        <span style="color:#2f74ff;">{{ scope.row.title }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="update_time" label="发布时间" width="170" align='center'>

                </el-table-column>

                <el-table-column label="评论" width="50" align='center'>
                    <template slot-scope="scope">
                        <span style="color:gray;">{{ scope.row.reviewsCount }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="收藏" width="50" align='center'>
                    <template slot-scope="scope">
                        <span style="color:gray;">{{ scope.row.fabulousCount }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="封面" width="50" align='center'>
                    <template slot-scope="scope">
                       <img :src="scope.row.bgImg" alt="" style="height: 13px;cursor:pointer;" preview="0" preview-text="描述文字" @click='download(scope.row.bgImg)'>
                    </template>
                </el-table-column>

                 <el-table-column label="附件" width="50" align='center'>
                    <template slot-scope="scope">
                       <i class='el-icon-s-goods' v-if='scope.row.upFileUrl' @click='download(scope.row.upFileUrl)' style="font-size: 24px;cursor: pointer;"> </i>
                    </template>
                </el-table-column>
               
                <el-table-column prop="className" label="分类" width="100" align='center'>
                </el-table-column>

                <el-table-column label="置顶" width="100" align='center'>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isTop" active-color="#13ce66" inactive-color="#ff4949"
                            @change='saveBlog(scope.row)'>
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="首页可见" width="100" align='center'>
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.showIndex" active-color="#13ce66" inactive-color="#ff4949"
                            @change='saveBlog(scope.row)'>
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="250" align='center'>
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click='turnTo(scope.row.blogId)'>转到</el-button>
                        <el-button type="primary" size="mini" @click='editBlog(scope.row.blogId)'>编辑</el-button>
                        <el-button @click="deleteBlog(scope.row.blogId)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card class="d2-mt d2-mr d2-card" shadow="never">
            <el-pagination background @current-change="findBlogByUsernameHasPage" :current-page.sync="page"
                :page-size="row" layout="total, prev, pager, next" :total="total">
            </el-pagination>
        </el-card>

    </d2-container>
</template>

<script>
import blog from '@/api/blog'
import util from '@/libs/util.js'

export default {
    name: 'blogList',
    data() {
        return {
            tableData: [],
            total: 0,
            row: 10,
            page: 1,
            classList: [],
            form: {
                type: "",
                title: "",
            }
        }
    },
    mounted() {
        this.findBlogByUsernameHasPage()
        this.findBlogClass()
    },
    methods: {
        download(url){
            window.open(url)
        },
        refresh() {
            this.form = { type: "", title: "" }
        },
        findBlogClass() {
            blog.findBlogClass().then(res => {
                this.classList = res.data
            }).catch(err => { })
        },
        async findBlogByUsernameHasPage() {
            console.log(this.form.type)
            let res = await blog.findBlogByUsernameHasPage({ page: this.page, row: this.row, userName: util.cookies.get('uuid'), title: this.form.title, className: this.form.type.replace('#', '') })
            if (res.success) {
                res.data.forEach(item => {
                    item.update_time = this.$getToday(item.update_time, 'yyyy-mm-dd hh:mm:ss')
                    item.isTop = item.isTop == 0 ? false : true
                    item.showIndex = item.showIndex == 0 ? false : true
                })
                // console.log(res.data)
                this.tableData = res.data
                this.total = res.total
            }
        },
        deleteBlog(blogId) {
            this.$confirm('请注意,是否删除博客?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await blog.deleteBlog({ blogId })
                if (res.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.findBlogByUsernameHasPage()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        editBlog(id) {
            this.$router.push({ path: 'blogEdit', query: { id } })
        },
        turnTo(id) {
            window.open(`${process.env.VUE_APP_API}/blogDetail?blogId=${id}`)
        },
        saveBlog(item) {
            blog.updateBlog({ name: item.name, title: item.title, body: item.body, className: item.className, bgImg: item.bgImg, upFileUrl: item.upFileUrl, isTop: item.isTop ? 1 : 0, showIndex: item.showIndex ? 1 : 0, blogId: item.blogId })
                .then(res => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.findBlogByUsernameHasPage()
                })
                .catch(err => { console.log(err) })

        },
        handleClick(row) {
            // console.log(row);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },


}
</script>
